<template>
  <div class="bscroll" @scroll="scroll()">
    <shop-articleheader @shangpin="shangpin" @wenzhang="wenzhang"></shop-articleheader>
    <div :is="mc"></div>
  </div>
</template>

<script type="text/ecmascript-6">
    import ShopArticleheader from "../components/shoparticle/ShopArticleheader.vue"
    import ShopArticlecontentone from "../components/shoparticle/ShopArticlecontentone.vue"
    import ShopArticlecontenttwo from "../components/shoparticle/ShopArticlecontenttwo.vue"
    export default {
      components: {
        ShopArticleheader,
        ShopArticlecontentone,
        ShopArticlecontenttwo,
      },
      data() {
        return {
          mc: "ShopArticlecontentone",
          maxScrollTop:0,
        }
      },
      methods: {
        shangpin:function() {
          this.mc="ShopArticlecontentone"
        },
        wenzhang:function() {
          this.mc="ShopArticlecontenttwo"
        },
        scroll:function () {
          var scrollTop=$(".bscroll")[0].scrollTop;
          if (scrollTop>=this.maxScrollTop){
            $(".barticle3").css({
              "position":"fixed",
              "top":"0px",
              "background":"white"
            });
          }
          else {
            $(".barticle3").css({
              "position":"static"
            });
          }
        }
      },
      mounted:function (){
        this.maxScrollTop=$(".barticle3")[0].offsetTop;
      }
    }
</script>

<style scoped lang="scss">
  .bscroll{
    flex: 1;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: white;
  }
</style>
